<template>
  <div v-loading="state.loading">
    <!-- 标题 -->
    <div class="title">
      酒品信息及厂区库存
    </div>

    <ht-table
      class="ht-table-no-border"
      :data="state.dataSource"
      style="width: 100%; margin-top: 12px"
      border
      :checked="false"
      highlight-current-row
      :hide-page="true"
      :hide-order="true"
      :columns="columns"
    >
      <template slot="breedSapName" slot-scope="{ row }">
        {{ row?.breedSapName || row?.wineBreedName }}
      </template>
      <template slot="breedSapCode" slot-scope="{ row }">
        {{ row?.breedSapCode || row?.wineBreedCode }}
      </template>

      <template slot="weight" slot-scope="{ row }">
        <span v-if="row.weight"> {{ row.weight + ' T' }}</span>
        <span v-else>--</span>
      </template>
      <template slot="gjkc" slot-scope="{ row }">
        <span v-if="row.gjkc"> {{ row.gjkc + ' T' }}</span>
        <span v-else>--</span>
      </template>
      <template slot="zjkc" slot-scope="{ row }">
        <span v-if="row.zjkc"> {{ row.zjkc + ' T' }}</span>
        <span v-else>--</span>
      </template>
      <template slot="cyykc" slot-scope="{ row }">
        <span v-if="row.cyykc"> {{ row.cyykc + ' T' }}</span>
        <span v-else>--</span>
      </template>
      <template slot="znyck" slot-scope="{ row }">
        <span v-if="row.znyck"> {{ row.znyck + ' T' }}</span>
        <span v-else>--</span>
      </template>
    </ht-table>
    <!-- 标题 -->
    <div class="title">
      库存明细
    </div>
    <div style="display:flex;">
      <div class="left" style="flex:1;">
        <el-form
          ref="baseForm"
          label-width="100px"
          :label-position="'top'"
          style="margin-top: 0"
          class="ht-search-form "
        >
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="所属部门">
                <ht-select-org
                  :clearable="true"
                  @change="handleSearch"
                  v-model="state.filter.manageOrganizationUnitId"
                ></ht-select-org>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="存放酒库">
                <SelectWineInventory
                  :clearable="true"
                  @change="handleSearch"
                  v-model="state.filter.warehouseCode"
                >
                </SelectWineInventory>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div
        class="right"
        style="width:136px;margin-top: 33px;
    padding-left: 24px;"
      >
        <el-button type="primary">筛选</el-button>
        <el-button type="" @click="reset">重置</el-button>
      </div>
    </div>
    <ht-table
      class="ht-table-no-border"
      :data="state.newdataSource"
      @onchange="changePage"
      style="width: 100%; margin-top: 12px"
      border
      @selection-change="(e) => (state.selectRows = e)"
      :checked="false"
      pageStyle="text-align:right"
      height="370"
      highlight-current-row
      :page-info="{
        currentPage: state.filter.currentPage,
        pageSize: state.filter.maxResultCount,
        skipCount: state.filter.skipCount,
        totalCount: state.filter.totalCount,
      }"
      :columns="columns1"
    >
      <Temp slot="empty">
        <span slot="tips">暂无数据哦</span>
      </Temp>
      <template slot="weight" slot-scope="{ row }">
        <span v-if="row.weight"> {{ row.weight + ' T' }}</span>
        <span v-else>--</span>
      </template>

      <template slot="manageOrganizationUnitId" slot-scope="{ row }">
        <ht-select-user
          v-if="row.manageOrganizationUnitId"
          v-model="row.manageOrganizationUnitId"
          :readonly="true"
        >
        </ht-select-user>
        <span v-else>--</span>
      </template>
    </ht-table>
  </div>
</template>
<script lang="ts">
import { Column, PageType } from 'htui-yllkbz/src/packages/type';
import Temp from '@/components/temp.vue';
import SelectWineInventory from '@/components/selectWineInventory.vue';
import { Component, Prop, Vue } from 'vue-property-decorator';
import { _axios } from 'vue-kst-auth';
import { JarStatusApi, WineBreedStockDetailPageDto } from '@/plugins/api';

interface State {
  /** 数据状态 */
  loading: boolean;
  /** 数据状态 */
  exportVsible: boolean;

  visible: boolean;
  searchHeight: number;
  activeName: string;
  testValue?: string;
  btnText: string;
  titleText: string;
  newdataSource: WineBreedStockDetailPageDto[];
  dataSource: any;
  /** 选中的数据 */
  selectRow: any;
  /** 批量选中的数据 */
  selectRows: any;
  filter: {
    filterText: string | undefined;
    manageOrganizationUnitId: string | undefined;
    warehouseCode: string | undefined;

    skipCount: number;
    maxResultCount: number;
    totalCount: number;
    currentPage: number;
  };
}
@Component({
  components: {
    SelectWineInventory,
    Temp,
  },
})
export default class Index extends Vue {
  JarStatusApi = new JarStatusApi('/alcohol-management', _axios);

  @Prop() selectRow!: any;
  /** 数据 */
  state: State = {
    loading: false,
    exportVsible: false,

    activeName: 'third',
    testValue: undefined,
    searchHeight: 84,
    visible: false,
    dataSource: [],
    newdataSource: [],
    selectRows: [],
    selectRow: {},

    btnText: '',
    titleText: '',
    filter: {
      filterText: undefined,
      manageOrganizationUnitId: undefined,
      warehouseCode: undefined,

      skipCount: 0,

      maxResultCount: 20,
      currentPage: 1,
      totalCount: 0,
    },
  };
  /** 生命周期 */
  mounted() {
    /** 查询列表 */
    console.log(this.selectRow, 'this.selectRow');

    this.state.dataSource.push(this.selectRow);

    // this.getDataSource();
    this.getWineBreedStockDetail();
  }

  getWineBreedStockDetail() {
    this.state.loading = true;
    const { filter } = this.state;

    this.JarStatusApi.getWineBreedStockDetail(
      this.selectRow.breedSapCode
        ? this.selectRow.breedSapCode
        : this.selectRow.wineBreedCode || undefined,

      filter.manageOrganizationUnitId,
      filter.warehouseCode,
      filter.skipCount,
      filter.maxResultCount,
      undefined
    )
      .then((res: any) => {
        this.state.newdataSource = res.items || [];

        this.state.filter.totalCount = res.totalCount || 0;
      })
      .finally(() => {
        this.state.loading = false;
      });
  }

  getDataSource() {
    // this.state.loading = true;

    this.state.dataSource = [
      {
        name: 'B酒',
        code: 'B01',
        enCode: 'SFGSA101',
        cate: '基酒',
        grade: '一级基酒',
        state: '在用',
      },
    ];
  }
  //重置
  reset() {
    const { filter } = this.state;
    filter.warehouseCode = '';
    filter.manageOrganizationUnitId = '';
    this.handleSearch();
  }

  handleSearch() {
    this.state.filter.skipCount = 0;
    this.state.filter.currentPage = 1;

    this.getWineBreedStockDetail();
  }

  //分页
  changePage(data: PageType) {
    this.state.filter.currentPage = data.currentPage;
    this.state.filter.maxResultCount = data.maxResultCount;
    this.state.filter.skipCount = data.skipCount;
    this.getWineBreedStockDetail();
  }
  /** 方法 */
  /** 监听 */
  /** 计算属性 */

  get columns(): Column[] {
    return [
      { key: 'breedSapName', title: '酒品名称' },
      { key: 'breedSapCode', title: '酒品代码' },

      { key: 'type', title: '酒品类别' },

      { key: 'grade', title: '酒品等级' },
      { key: 'weight', title: '库存总数' },
      { key: 'gjkc', title: '古井厂区库存总数' },

      { key: 'zjkc', title: '张集厂区库存总数' },

      { key: 'cyykc', title: '产业园厂区库存总数' },
      { key: 'znyck', title: '智能园厂区库存总数' },
    ];
  }
  get columns1(): Column[] {
    return [
      { key: 'manageOrganizationUnitId', title: '所属部门' },
      { key: 'warehouseName', title: '存放酒库' },

      { key: 'spaceName', title: '存放库位' },

      { key: 'sapName', title: '存放酒罐' },
      { key: 'sapCode', title: '酒罐编号' },
      // { key: "state", title: "生产年月" },

      { key: 'weight', title: '库存数量' },
    ];
  }
}
</script>
<style lang="scss" scoped>
.title {
  font-family: 微软雅黑;
  font-size: 14px;
  font-weight: bold;
  color: #323433;
  margin-top: 20px;
}
</style>
